<template>
  <div class="rightClickX" ref="rightClickDom" @mouseup="rightClickFn"
       @contextmenu.prevent="" >
    <div class="rightClickContent">
      <slot/>
    </div>

    <teleport to="body">
      <div class="menuPo" v-show="showMenu" @contextmenu.prevent="">


        <div class="menuRight refresh" @click="chooseTab(0)">
          <icon-x type="Refresh"/>
          <span class="text">{{ $t('tabText.refresh') }}</span>
        </div>

        <div class="menuRight refresh" @click="chooseTab(1)">
          <icon-x type="FullScreen"/>
          <span class="text">{{ $t("tabText.full") }}</span>
        </div>

        <div class="line"></div>

        <div class="menuRight closeTab" @click="chooseTab(2)">
          <icon-x type="Remove"/>
          <span class="text">{{ $t("tabText.closeNow") }}</span>
        </div>


        <div class="menuRight closeOther" @click="chooseTab(3)">
          <icon-x type="DArrowLeft"/>
          <span class="text">{{ $t("tabText.closeLeft") }}</span>
        </div>



        <div class="menuRight closeAllTab" @click="chooseTab(4)">
          <icon-x type="DArrowRight"/>
          <span class="text">{{ $t("tabText.closeRight") }}</span>
        </div>


        <div class="menuRight closeMenu" @click="chooseTab(5)">
          <icon-x type="CircleClose"/>
          <span class="text">{{ $t("tabText.closeOther") }}</span>
        </div>

      </div>
    </teleport>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import IconX from '../element/xhykIcon.vue'
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['click','update:modelValue'])

// 显示右键菜单
const showMenu = ref(false)
watch(()=>props.modelValue,newV => {
  showMenu.value = newV
},{immediate:true})


// 右击的位置
const positionX = ref('0px')
const positionY = ref('0px')

const rightClickDom = ref({})

const rightClickFn = (event) => {
  if (event.button == 2) {
    positionY.value = `${event.y}px`
    if (window.innerWidth - event.x <= 120) {
      positionX.value = `${window.innerWidth - 120}px`
    } else {
      positionX.value = `${event.x}px`
    }
    showMenu.value = true
    emit('update:modelValue',showMenu.value)
  }
}

// 点击了事件
const chooseTab = (index) => {
  emit('click', index)
  showMenu.value = false
  emit('update:modelValue',showMenu.value)
}
</script>

<style scoped lang='scss'>

.menuPo {
  position: absolute;
  top: v-bind(positionY);
  left: v-bind(positionX);
  border: 1px solid #dddddd;
  background-color: white;
  cursor: pointer;
  z-index: 2000;
  border-radius: 6px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.menuRight {
  padding: 6px 8px;
  font-size: 15px;
  display: flex;
  align-items: center;
  margin: 5px 8px;
  border-radius: 4px;
  &:hover {
    color: var(--menuSysColor,#409EFF);
    background-color: #EEEEEE;
  }
}


.line {
  border-top: 1px solid #dddddd;
  width: 100%;
  height: 0;
}

.text {
  margin-left: 4px;
  //font-size: 13px;
}

.rightClickContent {
  height: 100%;
  width: 100%;
}
</style>